<script setup>
import { ref, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { getAqiDetail } from '@/api/AqiDetail';

const route = useRoute();
const router = useRouter();

// 定义详情数据
const detailData = ref([
  { label: '确认AQI数据编号', value: '' },
  { label: '确认信息所在地址', value: [] },
  { label: '确认AQI等级', value: [] },
  { label: '确认日期时间', value: [] },
  { label: '网格员信息', value: [] },
  { label: '公众监督员信息', value: [] },
  { label: '公众监督员反馈信息描述', value: '' }
]);

// 获取路由参数中的 id


// 根据 id 获取详细数据并填充到表格中
onMounted(async () => {
  const id = localStorage.getItem('aqiDetailId');
  const result = await getAqiDetail(id);
  detailData.value = [
    { label: '确认AQI数据编号', value: result.data.id },
    { label: '确认信息所在地址', value: [result.data.gridProvince, result.data.gridCity, result.data.address] },
    { label: '确认AQI等级', value: result.data.measuredAqiLevel },
    { label: '确认日期时间', value: result.data.measuredTime },
    { label: '网格员信息', value: [result.data.workerName, result.data.assignWorkerCode] },
    { label: '公众监督员信息', value: [result.data.supervisorName, result.data.phone] },
    { label: '公众监督员反馈信息描述', value: result.data.description }
  ];
});

// 返回上一页的函数
const goBack = () => {
  router.go(-1);
};
</script>

<template>
  <div class="detail-container">
    <!-- 面包屑导航 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item>确认AQI数据管理</el-breadcrumb-item>
      <el-breadcrumb-item>确认AQI数据详情</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 返回按钮 -->
    <el-button type="primary" @click="goBack" style="float: right; margin-top: -30px;">返回</el-button>

    <!-- 表格展示详细信息 -->
    <el-table :data="detailData" border style="width: 100%; margin-top: 20px;">
      <el-table-column prop="label" label="" width="250" align="center"></el-table-column>
      <el-table-column prop="value" label="" align="left">
        <template #default="scope">
          <div v-if="Array.isArray(scope.row.value)">
            <el-tag v-for="tag in scope.row.value" :key="tag" style="margin-right: 5px;">{{ tag }}</el-tag>
          </div>
          <div v-else>{{ scope.row.value }}</div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<style scoped>
.detail-container {
  padding: 20px;
}

.el-breadcrumb {
  margin-bottom: 20px;
}
</style>